<template>
    <div class="person">
        {{ a }},{{ b }}
        <ul>
            <li v-for="person in list" :key="person.name">{{ person.name }} -- {{ person.age }}</li>
        </ul>
    </div>
</template>

<script setup lang="ts" name="Persona">
import {type Persons} from '@/types'
// 类似 vue 2 的 props 写法
import { defineProps, withDefaults } from 'vue' // 其中 defineProps 不一定非得引入（类似的宏函数均不需要非得引入）
// 接收父组件传来的 props，但是无法在脚本中使用，只能在结构中使用
// defineProps(['a', 'b'])

// 接收并使用
// let x = defineProps(['a', 'b', 'list'])
// console.log(x)  // x 是一个 proxy 对象，包含全部内容，如果父组件没给，那就是 undefined

// 接收 props 并做类型检查
// 这么写限定了接受的 props 只能是指定类型，如果给错了会报警告；如果给多了也会报警告，但优先显示页面
/* let x = defineProps<{list: Persons}>()
console.log(x) */

// 接收 + 类型检查 + 限制必要性 + 指定默认值
let x = withDefaults(defineProps<{list: Persons, a: string, b?: string}>(), {
    list: () => [{name: '默认姓名', age: 1}],   // 对象类型（数组或对象）需要使用 getter 函数
    a: '默认的 a'
})
console.log(x)  // x 是包含了传入 props 的对象


</script>

<style scoped>
.person {
    background-color: #afcfb7;
    border-radius: 10px;
    box-shadow: 0 0 10px;
    padding: 20px;
    margin: 10px 0;
}

button {
    margin-right: 5px;
}

hr {
    border-width: 3px;
    border-color: black;
    border-style: solid;
}
</style>
